<template>
  <div>
    <!-- 头部盒子 -->
    <header>
      <p>ele.me</p>
      <p v-if="dl!='成功'">登录|注册</p>
      <p v-else>登录成功</p>
    </header>
    <!-- 主要部分区域 -->
    <main>
      <p class="positioning">
        <span>定位当前城市:</span>
        <span>定位不准时,请在城市列表中选择</span>
      </p>
      <p class="location">
        <span class="location-dq" @click="add">
          {{ region }}
        </span>
        <span class="jiantou"> </span>
      </p>
      <div class="partition"></div>
      <p class="hot">热门城市</p>
      <ul class="hot-ul">
        <li
          @click="hot(value.name, value.id)"
          v-for="(value, index) in hotArr"
          :key="index"
        >
          {{ value.name }}
        </li>
      </ul>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">
          A
          <span>(按字母顺序排列)</span>
        </p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.A"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">B</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.B"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">C</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.C"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">D</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.D"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">E</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.E"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">F</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.F"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">G</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.G"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">H</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.H"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">J</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.J"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">K</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.K"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">L</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.L"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">M</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.M"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">N</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.N"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">P</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.P"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">Q</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.Q"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">R</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.R"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">S</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.S"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">T</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.T"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">W</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.W"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">X</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.X"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">Y</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.Y"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
      <div class="partition"></div>
      <div class="allregion">
        <p class="paixu">Z</p>
        <ul>
          <li
            @click="all(value.name, value.id)"
            v-for="(value, index) in this.letter.Z"
            :key="index"
          >
            {{ value.name }}
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>
<script>
import header from "../components/Header.vue";
import { getCityAll, getCity, getHotCity } from "../api/index.js";
export default {
  components: {
    header,
  },
  data() {
    return {
      region: "",
      hotArr: [],
      letter: [],
      arr: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      id: "",
      dl:""
    };
  },

  async mounted() {
    if(localStorage.dl){
      this.dl = localStorage.dl
    }
    /* 
    promose
    定义:会把未来可能发生的事情保存
    作用:帮忙解决异步处理
    相当于if else 只能返回一个值
    第一个值为保存成功 第二个值为保存失败

     */
    // var p = new Promise((i, j) => {
    //   setTimeout(() => {
    //     var n = 10;
    //     var m = 100;
    //     if (false) {
    //       i(n);
    //     } else {
    //       j(m);
    //     }
    //   }, 100);
    // });
    // p.then((res) => {
    //   console.log(res);
    // }).catch((err) => {
    //   console.log(err);
    // });
    /* 全部城市 */
    var ress = await getCityAll();
    if (ress.data) {
      this.letter = ress.data;
    }
    /* 当前城市 */
    var resd = await getCity();
    if (resd.data) {
      this.id = resd.data.id;
      this.region = resd.data.name;
    }
    /* 热门城市 */
    var reshot = await getHotCity();
    if (reshot.data) {
      this.hotArr = reshot.data;
    }
  },
  methods: {
    add() {
      this.$router.push({
        path: "/elmseach",
        query: { id: this.id, region: this.region },
      });
    },
    all(value, id) {
      this.$router.push({
        path: "/elmseach",
        query: { id: id, region: value },
      });
    },
    hot(value, id) {
      this.$router.push({
        path: "/elmseach",
        query: { id: id, region: value },
      });
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3190e8;
  width: 100%;
  height: 1rem;
  color: #fff;
  box-sizing: border-box;
}
main {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  overflow: hidden;
  padding-top: 1rem;
}
.positioning {
  width: 100%;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.22rem;
  color: #666;
  padding: 0.2rem;
  box-sizing: border-box;
}
.location {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.22rem;
  color: #666;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  box-sizing: border-box;
  margin-top: 0.1rem;
  border-top: 1px solid #e4e4e4;
}
.jiantou {
  width: 0.24rem;
  height: 0.24rem;
  fill: #999;
  border: 1px solid #999;
  border-width: 0.06rem 0.06rem 0px 0px;
  transform: rotateZ(45deg);
}
.location-dq {
  color: #3190e8;
  font-size: 0.4rem;
}
.partition {
  width: 100%;
  height: 0.3rem;
  background-color: #f5f5f5;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
.hot {
  width: 100%;
  height: 0.8rem;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.2rem;
  padding-left: 0.3rem;
  border: 1px solid #e4e4e4;
}
.hot-ul {
  width: 100%;
  overflow: hidden;
}
.hot-ul li {
  float: left;
  width: 25%;
  height: 0.8rem;
  border: 1px solid #e4e4e4;
  font-size: 0.2rem;
  text-align: center;
  line-height: 0.8rem;
}
.allregion {
  width: 100%;
  overflow: hidden;
}
.allregion ul {
  width: 100%;
  overflow: hidden;
}
.allregion ul li {
  float: left;
  width: 25%;
  height: 0.8rem;
  border: 1px solid #e4e4e4;
  font-size: 0.2rem;
  text-align: center;
  line-height: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
.paixu {
  width: 100%;
  height: 0.6rem;
  padding-left: 0.4rem;
  box-sizing: border-box;
  line-height: 0.6rem;
  font-size: 0.2rem;
  color: #666;
}
.paixu span {
  margin-left: 0.3rem;
}
</style>

